define(
	[
		'require',
		'./select',
		'broada/wijmo/wijcalendar/jquery.wijmo.wijcalendar',
		'broada/base/text!./template.hbs'
	],
	function (require) {
		"use strict";
		var tpl = require('broada/base/text!./template.hbs');

		var Component = Ember.Component.extend({
			didInsertElement: function(){
				var view = this;

				this.$().find('.hour-selector, .minute-selector').on('click', 'li', function(e){
					$(e.delegateTarget).find('li').removeClass('active');
					$(this).addClass('active');
				});
				
				$(document).on("click."+this.elementId, function(e){
					if($(e.target).closest('#'+view.elementId).length == 0){
						view.send('hideStartDateSelector');
					}
				});

				this.setDefaultDate();
			},

			willDestroyElement: function(){
				this._destroyCalendar();
				$(document).off("click."+this.elementId);
			},

			layout: Ember.HTMLBars.compile(tpl),

			classNames: "business-time-range",

			Select: require('./select'),

			maxHour: 23,

			hours: Ember.A([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]),

			maxHourChange: Ember.observer("maxHour", function(){
				this.$().find('.hour-selector>li').removeClass('hide');
				this.$().find('.hour-selector>li:gt('+this.get("maxHour")+')').addClass("hide");
			}),

			maxMinute: 59,

			minutes: Ember.A([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59]),

			maxMinuteChange: Ember.observer("maxMinute", function(){
				this.$().find('.minute-selector>li').removeClass('hide');
				this.$().find('.minute-selector>li:gt('+this.get("maxMinute")+')').addClass("hide");
			}),

			selectedDateChange: Ember.observer('selectedDate', function(){
				var date = this.get("selectedDate");
				if(date){
					this.set("selectedHour", date.getHours());
					this.set("selectedMinute", date.getMinutes());

					var str = APM.util.formatDate(date, "f");
					this.set("selectedDateFormatted", str);
				}else{
					this.set("selectedHour", null);
					this.set("selectedMinute", null);
					this.set("selectedDateFormatted", null);
				}

				this.updateHours();
			}),

			selectedHourChange: Ember.observer('selectedHour', function(){
				var hour = this.get("selectedHour");
				var selectedDate = this.get("selectedDate");
				var $selector = this.$().find('.hour-selector');
				var $lis = $selector.find("li").removeClass("active");

				if(hour != null){
					$lis.eq(hour).addClass("active");
					this._scrollIntoView($selector, hour);
					if(selectedDate){
						selectedDate.setHours(hour);
						this.updateMinutes();
						this.selectedDateChange();
					}
				}
			}),

			selectedMinuteChange: Ember.observer('selectedMinute', function(){
				var minute = this.get("selectedMinute");
				var selectedDate = this.get("selectedDate");
				var $selector = this.$().find('.minute-selector');
				var $lis = $selector.find("li").removeClass("active");

				if(minute != null){
					$lis.eq(minute).addClass("active");
					this._scrollIntoView($selector, minute);
					if(selectedDate){
						selectedDate.setMinutes(minute);
						this.selectedDateChange();
					}
				}
			}),

			selectValChange: Ember.observer('selectVal', function(){
				this.send('selectChange');
			}),

			setDefaultDate: function(){
				var defaultDate = this.get("defaultDate");
				if(defaultDate){
					defaultDate = new Date(defaultDate);
				}else{
					defaultDate = new Date(new Date() - timeD_value);
					defaultDate.setMinutes(defaultDate.getMinutes()-2);
				}
				this.set("selectedDate", defaultDate);
				this.updateBtnTxt();
			},

			_scrollIntoView: function($selector, index){
				$selector.scrollTop( ($selector.find("li").height()||26)*Math.max(index-4, 0));
			},

			_initCalendar: function(){
				var view = this,
					date = this.get("selectedDate"),
					$calendar = this.$().find('.calendar');
				$calendar.wijcalendar({
					displayDate: date,
					maxDate: new Date(new Date() - timeD_value),
					afterSelect: function(e, args){
						view.set("selectedDate", args.date);
					}
				});
				$calendar.wijcalendar('selectDate', date);
			},

			_destroyCalendar: function(){
				var $calendar = this.$().find('.calendar');
				if($calendar.data("wijmoWijcalendar")){
					$calendar.wijcalendar('destroy');
				}
			},

			updateBtnTxt: function(){
				var date = this.get("selectedDate");
				this.set("btnTxt", date?APM.util.formatDate(date, "f"):null);
			},

			updateHours: function(){
				var selectedDate = new Date(this.get("selectedDate")),
					today = new Date(new Date() - timeD_value);
				
				if( selectedDate.getFullYear() == today.getFullYear() &&
					selectedDate.getMonth() == today.getMonth() &&
					selectedDate.getDate() == today.getDate() ){
					this.set("maxHour", today.getHours());

					if(this.get("selectedHour") > today.getHours()){
						this.send("hourChange", 0);
					}
				}else{
					this.set("maxHour", 23);
				}
			},

			updateMinutes: function(){
				var selectedDate = new Date(this.get("selectedDate")),
					today = new Date(new Date() - timeD_value);

				if( selectedDate.getFullYear() == today.getFullYear() &&
					selectedDate.getMonth() == today.getMonth() &&
					selectedDate.getDate() == today.getDate() &&
					selectedDate.getHours() == today.getHours() ){
					this.set("maxMinute", today.getMinutes());

					if(this.get("selectedMinute") > today.getMinutes()){
						this.send("minuteChange", 0);
					}
				}else{
					this.set("maxMinute", 59);
				}
			},

			getTimeRange: function(){
				var startDate, endDate = this.get('selectedDate')||new Date(new Date() - timeD_value);
				endDate.setSeconds(0);
				endDate.setMilliseconds(0);
				startDate = new Date(+endDate);

				switch(this.get("selectVal")){
					default:
					case "1m":
						startDate.setMinutes(startDate.getMinutes()-1);
						break;
					case "1h":
						startDate.setHours(startDate.getHours()-1);
						break;
					case "1d":
						startDate.setDate(startDate.getDate()-1);
						break;
					case "7d":
						startDate.setDate(startDate.getDate()-7);
						break;
					case "1M":
						startDate.setMonth(startDate.getMonth()-1);
						break;
				}

				return {
					startDate: startDate,
					endDate: endDate
				};
			},

			actions: {
				showStartDateSelector: function(){
					this._initCalendar();
					this.$().find('.start-date-selector').show();

					this._scrollIntoView(this.$().find('.hour-selector'), this.get("selectedHour"));
					this._scrollIntoView(this.$().find('.minute-selector'), this.get("selectedMinute"));
				},

				hideStartDateSelector: function(){
					this._destroyCalendar();
					this.$().find('.start-date-selector').hide();
				},

				selectChange: function(){
					this.triggerAction({
						action: this.get("onChange"),
						actionContext: this.getTimeRange()
					});
				},

				hourChange: function(hour){
					this.set('selectedHour', hour);
				},

				minuteChange: function(minute){
					this.set('selectedMinute', minute);
				},

				btnOkAction: function(){
					this.updateBtnTxt();
					this.send("selectChange");
					this.send("hideStartDateSelector");
				},

				btnLastAction: function(){
					this.set("selectedDate", new Date(new Date() - timeD_value));
					this.send("btnOkAction");
				}
			}
		});

		return Component;
	}
);